<template>
  <view class="edit-resume">
    <!-- 简历评分模块 -->
    <view class="score-box">
      <view class="left-text">
        <text class="score-title">简历专业评分</text>
        <text class="score-tip">完善你的简历，你真的很优秀</text>
      </view>
      <view class="right-score">
        <text class="score-value">80分</text>
        <button class="ai-btn" @tap="resumeCheck">AI帮你优化</button>
      </view>
    </view>

    <!-- 功能模块 -->
    <view class="module" v-for="(item, index) in modules" :key="index">
      <text class="module-title">{{ item }}</text>

      <!-- 修改后的个人信息模块结构 -->
      <view v-if="item === '个人信息'" class="personal-info">
        <!-- 左侧信息栏 -->
        <view class="left-info">
          <!-- 原有信息项保持不变 -->
          <view class="info-line">
            <text class="label">姓名：</text>
            <input class="value" v-model="formData.name" placeholder="请输入姓名" />
          </view>
          <view class="info-line">
            <text class="label">性别：</text>
            <picker mode="selector" :range="genderOptions" @change="bindGenderChange">
              <text class="value">{{ formData.gender || '请选择性别' }}</text>
            </picker>
          </view>
          <view class="info-line">
            <text class="label">年龄：</text>
            <input class="value" type="number" v-model="formData.age" placeholder="请输入年龄" />
          </view>
          <view class="info-line">
            <text class="label">电话：</text>
            <input class="value" type="tel" v-model="formData.phone" placeholder="请输入电话" />
          </view>
          <view class="info-line">
            <text class="label">邮箱：</text>
            <input class="value" type="email" v-model="formData.email" placeholder="请输入邮箱" />
          </view>
        </view>
        <view class="right-avatar">
          <image class="avatar" src="/static/avatar.png" mode="aspectFill" />
        </view>
      </view>

      <!-- 多行输入模块 -->
      <view v-else-if="['求职意向', '教育经历', '自我评价', '主修课程'].includes(item)" class="input-area">
        <textarea v-model="formData[item]" class="multi-line-input" :placeholder="`请输入${item}`" auto-height />
        <button v-if="item !== '主修课程'" class="ai-optimize-btn" @click="optimizeContent(item)">AI帮你优化</button>
      </view>

      <!-- 教育时间模块 -->
      <view v-else-if="item === '教育时间'" class="education-time">
        <view class="time-line">
          <text class="label">入学时间：</text>
          <input class="value" v-model="formData.startDate" placeholder="" />
          <text class="label">毕业时间：</text>
          <input class="value" v-model="formData.endDate" placeholder="" />
        </view>
        <view class="info-line">
          <text class="label">毕业院校：</text>
          <input class="value" v-model="formData.university" placeholder="" />
        </view>
      </view>

      <!-- 新增更多模块占位 -->
      <view v-if="item === '更多模块'" class="more-module">
        <view class="category-grid">
          <view v-for="(cat, idx) in categories" :key="idx" class="category-box" @click="handleCategory(cat)">
            <text class="icon">{{ getIcon(cat) }}</text>
            <text class="label">{{ cat }}</text>
          </view>
        </view>
      </view>
    </view>
  

    <!-- 底部保存按钮 -->
    <view class="footer">
      <button class="save-btn" @click="updateResume">保存简历</button>
    </view>
  </view>

  <!-- 修改为uni-popup弹窗 -->
  <uni-popup ref="popup" type="bottom" :mask="false" class="popup-container">
    <scroll-view scroll-y>
      <view class="popup-content">
        <!-- 当前内容 -->
        <view class="popup-section">
          <text class="section-title">当前内容</text>
          <scroll-view scroll-y class="content-scroll">
            <textarea v-model="currentContent" class="suggestion-input" placeholder="当前内容为空" />
          </scroll-view>
        </view>

        <!-- 优化建议 -->
        <view class="popup-section" v-for="(item, index) in aiSuggestions" :key="index">
          <text class="section-title">建议 {{ index + 1 }}</text>
          <textarea v-model="aiSuggestions[index]" class="suggestion-input" placeholder="优化建议内容" />
          <button class="adopt-btn" @click="adoptSuggestion(index)">采纳</button>
        </view>

        <!-- 添加关闭按钮 -->
        <view class="close-btn-container">
          <button class="close-btn" @click="popup.close()">关闭</button>
        </view>
      </view>
    </scroll-view>
  </uni-popup>

</template>

<script setup lang="ts">
import type { resumeListInfo } from '@/types/resumeList'
import { ref } from 'vue'
import { getcampusExperienceCreateAPI, getselfEvaluationCreateAPI, getInternshipExperienceCreateAPI } from '@/service/resume'
// 新增模块数据
const modules = ref([
  '个人信息',
  '求职意向', 
  '教育经历',
  '自我评价',
  '主修课程',  // 新增模块
  '教育时间',  // 新增模块
  '更多模块'
])

const currentField = ref<string>('')
const currentContent = ref<string>('')
const aiSuggestions = ref<string[]>(["","",""])


// 新增表单数据
const formData = ref({
  name: '李小萌',
  gender: '女',
  age: '20',
  phone: '15379608907',
  email: '178890989',
  求职意向: '',
  教育经历: '', 
  自我评价: '',
  majorCourses: '',  // 新增
  startDate: '',    // 新增
  endDate: '',      // 新增
  university: ''    // 新增
})

const categories = [
  '校园经历', 
  '实习经历', 
  '工作经历', 
  '项目经历', 
  '技能荣誉'
]


const genderOptions = ['男', '女']

const bindGenderChange = (e) => {
  formData.value.gender = genderOptions[e.detail.value]
}
const resumeInfo = ref<resumeListInfo>({
  internshipExperience:"aaa",

})

//备选方案，总共有三个，后端返回
const internshipExperienceMethods = ref<string[]>([])
const campusExperienceMethods = ref<string[]>([])
const selfEvaluationMethods = ref<string[]>([])

const handleCategory = (name: string) => {
  console.log('打开:', name)
  
  // 实际开发中这里可以跳转到具体编辑页面
}

const getIcon = (name: string) => {
  const icons: Record<string, string> = {
    '校园经历': '🏫',
    '实习经历': '💼',
    '工作经历': '👔',
    '项目经历': '📁',
    '技能荣誉': '🏆'
  }
  return icons[name] || '✨'
}

const updateResume = async () => {
  try {
    uni.navigateTo({
      url: '/pagesMy/resumeList/resumeList'  // 确认路径与实际路由一致
    })
    uni.showToast({ title: '更新成功' })
  } catch (e) {
    uni.showToast({ title: '更新失败', icon: 'none' })
  }
}

//用于做简历信息总结 个人评价、实习经历、校园经历--》带给后端
const resumeCheck = () => {
  
}

// 用于获取实习经历的三个备选方案
const internshipExperienceCreate = async (internshipExperience:string) => {
  const res = await getInternshipExperienceCreateAPI(internshipExperience);//res.data的结果是一个string[]----》代表三个备选方案 GET请求
  internshipExperienceMethods.value = res.data;
}
const campusExperienceCreate = async (campusExperience:string) => {
  const res = await getcampusExperienceCreateAPI(campusExperience);
  campusExperienceMethods.value = res.data;
}
const selfEvaluationCreate = async (selfEvaluation:string) => {
  const res = await getselfEvaluationCreateAPI(selfEvaluation);
  selfEvaluationMethods.value = res.data;
}

const popup = ref<any>(null)

const optimizeContent = async (field: string) => {
  popup.value.open()  // 改为popup的打开方式
  try {
    currentField.value = field
    currentContent.value = formData.value[field]

    // 调用对应API获取优化建议
    let res
    switch (field) {
      case '求职意向':
        res = await getInternshipExperienceCreateAPI(currentContent.value)
        break
      case '教育经历':
        res = await getcampusExperienceCreateAPI(currentContent.value)
        break
      case '自我评价':
        res = await getselfEvaluationCreateAPI(currentContent.value)
        break
    }

    if (res?.data?.length >= 3) {
      aiSuggestions.value = res.data
      
    }
  } catch (e) {
    console.error('API请求错误详情:', e)
    uni.showToast({ title: `获取优化建议失败: ${e.message || '未知错误'}`, icon: 'none' })
  }
}

const adoptSuggestion = (index: number) => {
  formData.value[currentField.value] = aiSuggestions.value[index]
  popup.value.close()  // 改为popup的关闭方式
}

</script>
  
<style lang="scss" scoped>
.score-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  
  .left-text {
    display: flex;
    flex-direction: column;
    justify-content: center;  // 新增垂直居中
    .score-title {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 1.2;  // 新增行高调整
    }
    .score-tip {
      font-size: 24rpx;
      color: #888;
      margin-top: 8rpx;  // 缩小间距
    }
  }
  
  .right-score {
    align-items: center;
    padding-right: 30rpx;  // 新增右内边距
    .score-value {
      margin-right: 20rpx;  // 新增右外边距
      font-size: 40rpx;
      color: #87CEEB;
      text-align: center;
      
    }
    .ai-btn {
      margin-top: 10rpx;  // 缩小间距
      padding: 4rpx 16rpx;  // 减少内边距
      font-size: 22rpx;  // 缩小字号
      height: 50rpx;  // 固定高度
      line-height: 50rpx; 
      background-color:#87CEEB; // 垂直居中
    }
  }
}

.module {
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  border: 2rpx solid #eee;  // 新增边框
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);  // 新增阴影

  &-title {
    font-size: 28rpx;
    font-weight: 500;
    padding-left: 10rpx;
    border-left: 6rpx solid #007aff;
  }
}


.edit-resume {
  padding-bottom: 200rpx;  // 新增底部内边距
}

.footer {
  position: relative;  // 改为相对定位
  bottom: auto;
  margin-top: 60rpx;  // 新增顶部外边距
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.05); // 新增顶部阴影
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: white;
  
  .save-btn {
    background: #87CEEB;
    color: black;
    border-radius: 50rpx;
  }
}

// 新增个人信息模块样式
.personal-info {
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;

  .left-info {
    flex: 1;
    .info-line {
      display: flex;
      font-size: 28rpx;
      line-height: 1.8;
      color: #666;
      align-items: center;
      flex-wrap: nowrap;
    }
  }

  .right-avatar {
    width: 250rpx;
    height: 300rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-left: 40rpx;
    
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
}


// 调整模块通用样式
.module {
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 12rpx;
  border: 2rpx solid #eee;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.multi-line-input {
  position: relative;
  width: 95%;
  min-height: 300rpx;
  margin-top: 20rpx;
  padding: 20rpx 30rpx 80rpx;
  font-size: 28rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
}
.more-module {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #f8f8f8;
  border-radius: 8rpx;

  .placeholder-text {
    color: #999;
    font-size: 26rpx;
  }
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-top: 30rpx;

  .category-box {
    position: relative;  // 新增定位上下文
    background: #fff;  // 改为白色背景
    border: 2rpx solid #eee;  // 新增边框
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05); // 新增阴影
    margin: 10rpx;  // 增加外边距
    border-radius: 16rpx;
    padding: 30rpx;
    text-align: center;
    .category-box {
      &::after {
        right: 0;
        top: 0;
        transform: translate(50%, -50%);  // 通过位移实现精准居中
        width: 40rpx;
        height: 40rpx;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    &:nth-child(n+4) {  // 第4个开始（第二行）
      grid-column: span 1.5; // 占1.5列实现两列布局
    }

    .icon {
      font-size: 60rpx;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .label {
      font-size: 28rpx;
      color: #666;
    }
    // 新增加号按钮
    &::after {
      content: "+";
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 40rpx;
      height: 40rpx;
      background: #999;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: bold;
      box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.2);
    }
  }
}
.info-line {
  .value {
    flex: 1;
    margin-left: 20rpx;
    // border-bottom: 1rpx solid #eee;
    padding: 10rpx 0;
  }
}

.ai-optimize-btn {
  position: absolute;
  right: 0rpx;
  bottom: 20rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  background: #87CEEB;
  color: black;
  border-radius: 40rpx;
 
}
.input-area {
  position: relative; // 新增定位容器
  margin-top: 20rpx;
}

.popup-container {
  height: 70vh;
  background: #f8f8f8;
  border-radius: 16rpx 16rpx 0 0;
  padding: 30rpx 30rpx 0; 
    
  .popup-content {
    padding-bottom: 0rpx;
  }

  .popup-section {
    background: white;
    height: 20vh;
    padding: 10rpx;   
    position: relative;
    
    .content-scroll {
        height: 15vh;
        margin-top: 10rpx;
      }
  }

  .section-title {
    font-weight: bold;
    height: 40rpx;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
  }

  .suggestion-input {
    width: 100%;
    height: 180rpx;
    min-height: 50rpx;
    padding: 15rpx;
    border: 1rpx solid #eee;
    border-radius: 8rpx;
  }

  .adopt-btn {
    position: absolute;
    right: 34rpx;
    bottom: 50rpx;
    padding: 8rpx 30rpx;
    background: #87CEEB;
    color: white;
    border-radius: 40rpx;
    font-size: 24rpx;
  }
    .close-btn-container {
      padding: 20rpx;
      background: #f8f8f8;
  
      .close-btn {
        width: 90%;
        height: 70rpx;
        background: #87CEEB;
        color: white;
        border-radius: 40rpx;
        font-size: 28rpx;
      }
    }
}

.education-time {
  margin-top: 20rpx;

  .time-line {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .label {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #666;
    }

    .value {
      flex: 1;
      border-bottom: 1rpx solid #eee;
      padding: 10rpx 0;
      margin-right: 20rpx;
    }
  }

  .info-line {
    display: flex;
    align-items: center;

    .label {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #666;
    }

    .value {
      flex: 1;
      border-bottom: 1rpx solid #eee;
      padding: 10rpx 0;
    }
  }
}
</style>
